import React, { useState } from 'react'
import { Layout, theme, Dropdown, Space, Avatar, App } from 'antd'
const { Header } = Layout
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { useStor } from '../../store/index'
import { observer } from 'mobx-react-lite'
import { useNavigate } from 'react-router-dom'
function Appheader() {
    const navigate = useNavigate()
    const { collapsedStore, userStroe } = useStor()
    const items = [
        {
            key: "setting",
            type: "group",
            label: "用户设置",
            children: [
                {
                    key: "person-setting",
                    label: "个人设置",
                    icon: "",
                },
                {
                    key: "system-setting",
                    label: "系统设置",
                    icon: "",
                },
            ],
        },
        {
            key: "logout",
            label: "退出登录",
            icon: "",
        },
    ];

    const handleMenuClick = (e) => {
        userStroe.logout(() => {
        })
        navigate('/login')
    };
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    return (
        <Header className='tanxin' style={{ background: colorBgContainer }}>
            <div>
                {React.createElement(collapsedStore.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: () => {
                        collapsedStore.change()
                    },
                })}
            </div>
            <Dropdown menu={{ items, onClick: handleMenuClick }} >
                <Space>
                    <Avatar src={<img src='../../src/assets/image/3.jpg' />} />
                </Space>
            </Dropdown>
        </Header>

    )
}
export default observer(Appheader) 